<template>
    <div>
        <h5>{{title}}</h5>

        <k-form :model="loginForm" :rules="rules"  ref="loginForm" label-width="100px" class="demo-loginForm">
            <k-form-item lable="用户名:" prop="name">
                <k-input v-model="loginForm.name"  @input="bclick"></k-input>
            </k-form-item>
            <k-form-item lable="密码:" prop="pwd">
                <k-input v-model="loginForm.pwd" type="password"  @input="bclick"></k-input>
            </k-form-item>
            <k-form-item >
                <k-button @click="submitForm('loginForm')" >登录</k-button>
            </k-form-item>
        </k-form>

        <el-form :model="loginForm" :rules="rules"  ref="loginForm" label-width="100px" class="demo-loginForm">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="loginForm.name"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="loginForm.pwd" type="password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
                <!--<el-button @click="resetForm('loginForm')">取消</el-button>-->
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
    import KButton from './Button.vue'
    import KInput from './Input.vue'
    import KForm from './KForm.vue'
    import KFormItem from './KFormItem.vue'

    export default {

        props:['title'],
        data(){
            return {
                loginForm:{name:"",pwd:""},
                rules:{
                    name:[
                        {required:true,message:"请输入用户名"},
                        {min:6,max:8,message:"请数字6-8位的用户名"}
                        ],
                    pwd:[
                        {required:true,message:"请输入密码"}
                    ]
                }
            }
        },
        components: {
            KButton,KInput,KFormItem,KForm
        },
        methods:{
            submitForm() {
                this.$refs.loginForm.validate(valid=>{
                    if(valid){
                        alert("登录成功")
                    }else{
                        console.log("校验失败");
                        return false;
                    }
                });
                
            },
            bclick(res){
                console.log(res)
            }
        },
        created(){
            console.log(this.title);
        },

    }
</script>

<style scoped>

</style>